<template>
  <div
    class="group bg-gray-50 dark:bg-gray-900 border dark:border-gray-800 rounded-lg transform transition-all p-3 sm:p-5 hover:-translate-y-0.5"
  >
    <div class="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4">
      <!-- 图标容器 -->
      <div
        class="flex-shrink-0 p-2 bg-primary-light/50 dark:bg-primary-light/70 rounded-md self-start"
      >
        <!-- 使用SVG图标 -->
        <div v-if="typeof project.icon === 'string'" 
             class="w-5 h-5 sm:w-6 sm:h-6 text-primary-dark"
             v-html="project.icon">
        </div>
        <div v-else class="w-5 h-5 sm:w-6 sm:h-6 text-primary-dark">
          <!-- 备用图标 -->
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
          </svg>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="flex-1 min-w-0">
        <h4
          class="text-base sm:text-[15px] font-medium text-gray-800 dark:text-gray-300 truncate"
        >
          {{ project.name }}
        </h4>
        <p
          class="text-sm sm:text-[13px] text-gray-600 mt-1 dark:text-gray-300 line-clamp-2"
        >
          {{ project.description }}
        </p>

        <!-- 语言标签 -->
        <div class="flex items-center gap-2 mt-2 flex-wrap">
          <span
            v-if="project.language"
            class="inline-flex items-center px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 text-xs font-medium"
          >
            <svg
              class="w-3 h-3 mr-1 text-blue-400"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 12.93V15a1 1 0 11-2 0v-.07A6.002 6.002 0 014 10a6 6 0 1112 0 6.002 6.002 0 01-5 5.93z"
              />
            </svg>
            {{ project.language }}
          </span>
        </div>

        <!-- 项目标签 -->
        <div class="mt-2 flex flex-wrap gap-1.5">
          <span
            v-for="(tag, index) in project.tags"
            :key="index"
            class="text-xs px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded-md"
          >
            {{ tag }}
          </span>
        </div>

        <!-- 底部操作栏 -->
        <div
          class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-2 mt-3 pt-3"
        >
          <a
            :href="project.html_url"
            target="_blank"
            class="order-2 sm:order-1 inline-flex items-center text-sm dark:text-gray-100 text-primary-dark hover:underline"
          >
            查看项目
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
            </svg>
          </a>

          <div class="order-1 sm:order-2 flex flex-wrap items-center gap-2">
            <span
              v-if="project.created_at"
              class="inline-flex items-center px-2 py-0.5 rounded bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 text-xs font-medium"
            >
              <svg
                class="w-3 h-3 mr-1 text-green-400"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
              {{ formatDate(project.created_at) }}
            </span>

            <div
              class="flex items-center bg-white/80 dark:bg-gray-800/80 px-2 py-0.5 rounded shadow"
            >
              <svg
                class="w-3.5 h-3.5 text-gray-400 hover:text-primary-dark transition-colors"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
              <span
                class="ml-1 text-xs text-gray-500 dark:text-gray-300 font-medium"
              >
                {{ project.watchers_count || 0 }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import dayjs from "dayjs";

const props = defineProps({
  project: {
    type: Object,
    required: true,
    validator: (p: any) => ["name", "description"].every((key) => key in p),
  },
  delay: {
    type: Number,
    default: 100,
  },
});

function formatDate(date: string) {
  return dayjs(date).format("YYYY年MM月DD日");
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .project-card {
    padding: 0.75rem;
  }
  
  .project-card-title {
    font-size: 1rem;
  }
  
  .project-card-description {
    font-size: 0.75rem;
  }
}
</style>
